<template>
  <div class="main">
    <p class="main_p1">Product</p>
    <div
      style="line-height: 50px; font-size: 20px"
      v-loading="loading"
      v-if="product"
    >
      <p>ID：{{ product.id }}</p>
      <p>Name：{{ product.name }}</p>
      <p>Type：{{ product.type }}</p>
      <p>Color：{{ product.color }}</p>
      <p>Version：{{ product.version }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getProduct, isProduct } from '@/api/products';
import { useRoute } from 'vue-router';
import { ref } from 'vue';
import { promiseRef } from '@/utils/promiseRef';
import { ElMessage } from 'element-plus';
const loading = ref(true);
const product = promiseRef(
  (async () => {
    const route = useRoute();
    const id = route.params.id;
    if (Array.isArray(id)) {
      throw new Error('id is not a string');
    }
    const res = await getProduct(id);
    const data = res.data;
    if (isProduct(data)) {
      loading.value = false;
      return data;
    }
    ElMessage.error('data is not a product');
    throw new Error('data is not a product');
  })()
);
</script>

<style scoped>
@import '../assets/style.css';
</style>
